<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Blog</title>
    <link rel="stylesheet" href="H_style.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1869479_1okpl50qxwp.css">
</head>
<body>
    <!-- 导航栏 -->
    <div id="box1">
        <div id="navigation">
            <div id="menu">
                <ul id="menu_left">
                    <li><a href="#" >Logo</a></li>
                    <li><a href="#"><i class="iconfont iconHomehomepagemenu"></i>Home</a></li>                   
                    <li><a href="#"><i class="iconfont iconet-workshop-inventory"></i>Works</a></li>                  
                    <li id="menu_team"><a href="#"><i class="iconfont iconteamwork"></i>Team</a>
                        <ul>
                            <li><a href="">张三</a></li>
                            <li><a href="">李四</a></li>
                            <li><a href="">王五</a></li>
                        </ul>
                    </li>
                    <li><a href="#"><i class="iconfont iconabout"></i>About</a></li>
                </ul> 
                <ul id="menu_right">
                    <li><a href="login.html"><i class="iconfont icondenglu"></i>Login</a></li>
                    <li><a href="register.html"><i class="iconfont iconzhuce"></i>register</a></li>
                    <li><a href="#"><i class="iconfont iconset"></i>Set</a></li>
                </ul>  
            </div>
        </div>
    </div>
    <!-- 搜索框 -->
    <div id="box2">
        <div id="search">
            <input type="text" placeholder="what are you looking for?">
            <button><i class="iconfont iconchazhao"></i></button>
        </div>
    </div>
    <!-- 三行模式 -->
    <div id="box3">
        <!-- 个人面板 -->
        <div id="left">
            <div id="me">               
                <img src="picture/head.jpg" alt="head picture">
                    <p id="username">UserName</p>              
                    <div id="count">
                        <div id="like">1<p> like</p></div>
                        <div id="comment">1<p>comment</p> </div>
                        <div id="view">1<p>view</p></div>
                    </div>
                    <div id="contact">
                        <a href="https://www.qq.com/" target="_blank"><i class="iconfont iconQQ"></i></a>
                        <a href="https://wx.qq.com/" target="_blank"><i class="iconfont iconwechat"></i></a>
                        <a href="https://www.bilibili.com/" target="_blank"><i class="iconfont iconbilibili-fill"></i></a>
                        <a href="https://www.csdn.net/" target="_blank"><i class="iconfont iconcsdn"></i></a>
                    </div>
            </div>
        </div>
        <!-- 文章栏 -->
        <div id="center">
            <div id="articles">
                <div class="logs 1">
                    <div class="part1">     
                        <h1>百度</h1>                  
                        <div class="pic">
                            <img src="picture/IMG_2888.JPG" alt="picture">
                        </div>
                    </div>
                    <div class="part2">
                        <p>百度</p>
                        <a href="https://www.baidu.com" target="_blank">Read More</a>
                    </div>
                </div>
                <div class="logs 2">
                    <div class="part1">     
                        <h1>This is a title</h1>
                        <div class="pic">                
                            <img src="picture/IMG_3854.JPG" alt="picture">
                        </div>  
                    </div>
                    <div class="part2">
                        <p>content</p>
                        <a href="https://www.baidu.com">Read More</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 公告栏 -->
        <div id="right">
            <div id="board">
                <div id="notice">
                    <h3>Notice Board</h3>
                    <div><a href="#">Thank</a></div>
                    <div><a href="#">you</a></div>
                    <div><a href="#">for</a></div>
                    <div><a href="#">your</a></div>
                    <div><a href="#">viewing</a></div>
                    <div><a href="chat.html">Chat_Test</a></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>